<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%
 	int pageIndex = request.getParameter("pageIndex") == null ? 1 : Integer.parseInt(request.getParameter("pageIndex"));
 %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<link rel="stylesheet" href="demo.css?v=2">
    <script src="javascript/modernizr.custom.34807.js"></script>
    <script> if(!Modernizr.csstransforms3d) document.getElementById('information').style.display = 'block'; </script>
    <script>!window.jQuery && document.write(unescape('%3Cscript src="javascript/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
    <script src="javascript/demo.js"></script>
	<script type="text/javascript">
		$(function() {
			var searchText = "리복%20퓨리";
			var url = "http://shopping.naver.com/search/all_search.nhn?query="
						+ searchText 
						+ "&pagingIndex="
						+ <%=pageIndex%>
						+"&pagingSize=20&productSet=total&viewType=list&searchBy=none&sort=rel&frm=NVSCPRO";
			
			//$('#testButton').click(function() {
				//alert(url);
				$.ajax(
						{
							url : "htmlMaker.jsp",
							dataType : "JSON",
							type : "GET",
							data : { "url" : url },
							crossDomain : true,
							success : function(data) { 
									var imageList = "";
									$.each(data, function(index, entry) {
										/* imageList += "<a href='" + entry.linkUrl +"' target='_blank'><img src='" + entry.imageUrl + "'></a>"; */
										imageList += "<li>";
										/* imageList += "<a href='" + entry.linkUrl +"' class='imagelink'><img src='" + entry.imageUrl + "' alt='" + entry.imageID + "' class='image'></a>"; */
										imageList += "<a href='" + entry.linkUrl +"'><img src='" + entry.imageUrl + "' alt='" + entry.imageID + "'></a>";
										imageList += "</li>";
									});
									var linkPage = "";
									linkPage += "<nav id='navigation'>";
									for(var i = 1; i < 6; i++){
										
										linkPage += "<a href='NaverShopping.jsp?pageIndex=" + i + "' class='nav'>" + i + "</a>";
										linkPage += "&nbsp;&nbsp;&nbsp;"
									}
									linkPage += "</nav>";
									//alert(imageList);
									$('#portfolio-item').append(imageList);
									$('#portfolio').append(linkPage);
									new Portfolio();
							}
						}
				);
			//});
		});
	</script>
</head>
<body>
	<div id="container">
	<span id="information" style="display:none">Your browser doesn't support CSS3 3D Transform</span>
    <h1>Portfolio Flipping Slider Using jQuery & CSS3</h1>
    <em><a href="http://www.webstuffshare.com/?p=2637">&bull; read tutorial &bull;</a></em>
    
    <div id="portfolio"></div>
    
    <ul id="portfolio-item">
    
    </ul>
    
  
    
    </div>  
    
    <div id="hoverpopup" class="hoverpopup" style="width:100px; height:100px; border:solid 1px blue; visibility: hidden; position: absolute;">

	<!-- <input id="testButton" type="button" value="클릭">
	<div id="container"> 
		
	</div> -->
</body>
</html>